<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 实现左右布局,方式1-通过栅格系统 -->
      <!--
      <el-row>
        <el-col :span="12">左</el-col>
        <el-col :span="12">右</el-col>
      </el-row>
      -->
      <!-- 实现左右布局,方式2-通过flex -->
      <!-- <el-row type="flex">
        <el-col>左</el-col>
        <el-col>右</el-col>
      </el-row> -->
      <el-card class="tree-card">
        <TreeTools :tree-node="company">
          <el-dropdown-item
            :disabled="!checkPermission('add-dept')"
            @click.native="addDept(company)"
          >添加子部门</el-dropdown-item>
        </TreeTools>
        <!-- 使用树组件 -->
        <el-tree :data="departs" :default-expand-all="true">
          <TreeTools slot-scope="{ data }" :tree-node="data">
            <el-dropdown-item
              :disabled="!checkPermission('add-dept')"
              @click.native="addDept(data)"
            >添加子部门</el-dropdown-item>
            <el-dropdown-item @click.native="editDept(data)">编辑部门</el-dropdown-item>
            <el-dropdown-item
              @click.native="delDept(data.id)"
            >删除部门</el-dropdown-item>
          </TreeTools>
        </el-tree>
      </el-card>
    </div>
    <!-- <AddDept ref="addDeptRef" :show-dialog.sync="showDialog" :tree-node="node" @addDept="getDepartments"></AddDept> -->
    <!-- 第二种校验和重置数据的方法 v-if -->
    <AddDept v-if="showDialog" ref="addDeptRef" :show-dialog.sync="showDialog" :tree-node="node" @addDept="getDepartments"></AddDept>
  </div>
</template>

<script>
// 导入组件,注册组件
import TreeTools from './components/tree-tools.vue'
// 导入获取组织架构的数据的接口
import { delDepartment, getDepartments } from '@/api/departments'
// 导入将数组数据转化成树形结构
import { tranListToTreeData } from '@/utils'
import AddDept from './components/add-dept.vue'

export default {
  name: 'Departments',
  components: { TreeTools, AddDept },
  props: {},
  data() {
    return {
      company: { name: '', manager: '负责人', id: '' },
      departs: [],
      showDialog: false, // 控制对话框显示
      node: {} // 当前操作的部门
    }
  },
  async created() {
    this.getDepartments()
  },
  mounted() {},
  methods: {
    /*
    checkPermission(key) {
      try {
        return this.$store.state.user.userInfo.roles.points.includes(key)
      } catch (e) {
        return false
      }
    },
    */
    async editDept(data) {
      this.node = data
      this.showDialog = true
      // 方式一 回写 ----在父组件引入接口
      // const formData = await getDepartDetail(data.id)
      // this.$refs.addDeptRef.formData = formData
      // 方式二 回写 ----在子组件引入接口,父组件调用子组件的方法
      // this.$refs.addDeptRef.getDepartDetail(data.id)
      // 方式2 通过v-if来重置此时这里要 延迟处置
      this.$nextTick(() => {
        this.$refs.addDeptRef.getDepartDetail(data.id)
      })
    },
    addDept(data) {
      this.node = data
      this.showDialog = true
    },
    async getDepartments() {
      const { companyName, depts } = await getDepartments()
      this.company.name = companyName
      this.departs = tranListToTreeData(depts)
    },
    async delDept(id) {
      try {
        // 确认
        await this.$confirm('是否删除?')
        console.log('点击了是')
        // 发请求
        await delDepartment(id)
        // 提示成功
        this.$message.success('删除成功')
        // 刷新列表
        this.getDepartments()
      } catch (error) {
        console.log('点击了否')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
